<template>
  <div class="new-essay" :class="sideTheme">
    <div class="essay-top">
      <history class="essay-icon" />
      <span>最新文章</span>
    </div>
    <div class="essay-list" v-for="(item, index) in list" :key="index">
      <div class="essay-item">
        <div class="item-left">
          <img :src="item.img" alt="" />
        </div>
        <div class="item-right">
          <span class="item-content" @click="toDetail(item)">{{
            item && item.title
          }}</span>
          <span class="item-time">{{ item && item.createTime }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts" name="NewEssay">
import { History } from '@vicons/fa';
import { getArticle } from '@/api/home.js';
import { useSettingsStore } from '@/store';
import { useRouter } from 'vue-router';
import { ref, onMounted, computed } from 'vue';
const router = useRouter();

const settingsStore = useSettingsStore();
const sideTheme = computed(() => settingsStore.sideTheme);

const list = ref([]);
const toDetail = (item:any) => {
  if (item.route) {
    router.push({ name: item.route });
  }
};
onMounted(() => {
  getArticle({
    pageNum: 1,
    pageSize: 5,
  }).then((res:any) => {
    list.value = res.list;
  });
});
</script>

<style lang="scss" scoped>
.new-essay {
  margin-top: 20px;
  padding: 20px 24px;
  border-radius: 8px;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  background: rgba(255, 255, 255, 0.9);
}
.essay-top {
  margin-bottom: 6px;
  .essay-icon {
    width: 18px;
    height: 18px;
    margin-bottom: -3px;
    margin-right: 5px;
  }
  span {
    font-size: 17px;
    color: #4c4948;
  }
}
.essay-list {
  .essay-item {
    box-sizing: border-box;
    display: flex;
    margin-bottom: 6px;
    .item-left {
      width: 63px;
      height: 63px;
      overflow: hidden;
      margin-right: 10px;
    }
    img {
      width: 63px !important;
      height: 63px;
      object-fit: cover;
      -webkit-transition: filter 375ms ease-in 0.2s, -webkit-transform 0.6s;
    }
    .item-right {
      width: calc(100% - 73px);
      // display: inline-flex;
      flex-wrap: wrap;
      align-content: center;
      .item-content {
        display: block;
        color: #4c4948;
        font-size: 14px;
        overflow: hidden;
        line-height: 1.5;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        transition: all 0.2s ease-in-out;
      }
      .item-time {
        display: block;
        font-size: 12px;
        color: #858585;
        font-size: 85%;
        margin-top: 3px;
      }
    }
    .item-content:hover {
      cursor: url('../../assets/cur/x2.cur'), default;
      color: #80c8f8;
    }
    img:hover {
      transform: scale(1.1);
    }
  }
}

.theme-dark {
  background: rgba(0, 0, 0, 0.5) !important;
  span,
  .essay-icon {
    color: #ffffffb3 !important;
  }
  .item-time {
    color: #858585;
  }
}
</style>
